@page
@{ Layout = "_Layout"; }

<el-alert type="error">此操作将把以下 <strong> {{ users.length }} </strong> 名成员转移至指定部门，确定吗？</el-alert>

<el-table
  :data="users"
  style="width: 100%;"
  size="small"
  row-key="id"
  stripe>
  <el-table-column
    label="头像" width="100">
    <template slot-scope="scope">
      <el-link :underline="false" v-on:click="btnViewClick(scope.row.id)">
        <el-badge v-if="!scope.row.checked" style="margin-top: 10px;" value="待审核">
          <el-avatar :size="40" :src="scope.row.avatarUrl || utils.getAssetsUrl('images/default_avatar.png')"></el-avatar>
        </el-badge>
        <el-badge v-else-if="scope.row.locked" style="margin-top: 10px;" value="锁定">
          <el-avatar :size="40" :src="scope.row.avatarUrl || utils.getAssetsUrl('images/default_avatar.png')"></el-avatar>
        </el-badge>
        <el-avatar v-else :size="40" :src="scope.row.avatarUrl || utils.getAssetsUrl('images/default_avatar.png')"></el-avatar>
      </el-link>
    </template>
  </el-table-column>
  <el-table-column
    label="账号">
    <template slot-scope="scope">
      <el-link :underline="false" type="primary" v-on:click="btnViewClick(scope.row.id)">{{scope.row.userName}}</el-link>
    </template>
  </el-table-column>
  <el-table-column
    prop="departmentName"
    label="部门">
  </el-table-column>
  <el-table-column
    prop="displayName"
    label="姓名">
  </el-table-column>
  <el-table-column label="手机" width="120">
    <template slot-scope="scope">
      <div v-if="scope.row.mobile">
        {{ scope.row.mobile }}
        <el-tag v-if="scope.row.mobileVerified">已验证</el-tag>
        <el-tag v-else type="warning">待验证</el-tag>
      </div>
    </template>
  </el-table-column>
</el-table>

<el-divider></el-divider>
<div style="height: 10px"></div>

<el-form v-on:submit.native.prevent size="small" ref="form" :model="form" :inline="true">
  <el-form-item v-if="transDepartments" label="转移到部门" prop="transDepartmentIds" :rules="{ required: true, message: '请选择转移到的部门' }">
    <el-cascader-panel
      v-model="form.transDepartmentIds"
      :options="transDepartments"
      :props="{ checkStrictly: true }"
      filterable
      clearable
      placeholder="请选择部门">
      <template slot-scope="{ node, data }">
        <span>{{ data.label }}</span>
        <span> ({{ data.count }}) </span>
      </template>
    </el-cascader-panel>
  </el-form-item>
</el-form>

<el-divider></el-divider>
<el-row align="right" style="margin-right: 5px; margin-top: 10px;">
  <el-col :span="24" align="right">
    <el-button size="small" type="primary" v-on:click="btnSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
  </el-col>
</el-row>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/settings/usersLayerDepartments.js" type="text/javascript"></script>
}